<template>
  <header class="header-top">
    <p class="logo">光谷智慧交通管理系统</p>
    <!-- 中间的导航下拉 -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#fff"
      text-color="#202124"
      active-text-color="#0381fe"
    >
      <el-sub-menu index="1">
        <template #title>地图切换</template>
        <el-menu-item index="1-1" @click="toggleMap(map, '1-1')"
          >矢量地图(默认)</el-menu-item
        >
        <el-menu-item index="1-2" @click="toggleMap(map, '1-2')"
          >影像地图</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>实时路况</template>
        <el-menu-item index="2-1" @click="ShowRoad(map)">显示路况</el-menu-item>
        <el-menu-item index="2-2" @click="dialogVisible = true"
          >报告路况</el-menu-item
        >
        <el-menu-item index="2-3" @click="hideRoad(R_source, R_layer, shape)"
          >关闭路况</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>事故多发地</template>
        <el-menu-item index="3-1" @click="toggleHotMap(map, '3-1')"
          >显示热力图</el-menu-item
        >
        <el-menu-item index="3-2" @click="toggleHotMap(map, '3-2')"
          >关闭热力图</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>工具箱</template>
        <el-menu-item
          index="4-1"
          @click="handleMeasure(map, l_source, 'length')"
          >测量距离</el-menu-item
        >
        <el-menu-item index="4-2" @click="handleMeasure(map, l_source, 'area')"
          >测量面积</el-menu-item
        >
        <el-menu-item index="4-3" @click="handleMeasure(map, l_source, 'close')"
          >关闭测量</el-menu-item
        >
        <el-menu-item index="4-4" @click="handleMeasure(map, l_source, 'photo')"
          >导出图片</el-menu-item
        >
      </el-sub-menu>
      <el-menu-item index="5" @click="getAnnouncement">查看公告</el-menu-item>
    </el-menu>
    <!-- 输入框 -->
    <el-input
      placeholder="请输入关键字进行查询"
      class="input-with-select"
      v-model="searchText"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch(map)" />
      </template>
    </el-input>
    <!-- 头像区域 -->
    <div class="demo-basic--circle">
      <el-dropdown>
        <!-- 头像 -->
        <span class="el-dropdown-link">
          <el-avatar> user </el-avatar>
        </span>
        <!-- 下拉列表 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleUpdatePassword"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item divided @click="getQuitLogin"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
  <!-- 点击查看公告框列表 -->
  <el-dialog
    v-model="ViewAnnouncements"
    title="查看公告"
    :close-on-click-modal="false"
  >
    <div>
      <input
        class="notice-input"
        placeholder="请输入关键字"
        v-model.trim="noticeSearch"
      />
      <button class="notice-button notice-search" @click="doFilter">
        搜索
      </button>
      <button class="notice-button notice-reset" @click="flushed">重置</button>
    </div>

    <el-table :data="notices" border stripe>
      <el-table-column
        label="序号"
        property="notice_id"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        label="公告内容"
        property="notice_content"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column
        label="时间"
        property="notice_time"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template v-slot="Scoped">
          <el-button type="primary" @click="handleView(Scoped.row.notice_id)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-if="isShow"
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[1, 2, 4, 5]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
  <!-- 点击查看公告详情 -->
  <el-dialog
    v-model="ViewAnnouncement"
    title="公告详情"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="ViewAnnouncement">
      <div class="content">{{ notice.notice_content }}</div>
      <div class="time">{{ notice.notice_time }}</div>
    </div>
  </el-dialog>
  <!-- 报告路况的 dialog -->
  <el-dialog
    v-model="dialogVisible"
    title="报告路况"
    width="40%"
    draggable
    center
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="120px"
      status-icon
    >
      <el-form-item label="事件类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择事件类型">
          <el-option label="碰撞" value="碰撞" />
          <el-option label="剐蹭" value="剐蹭" />
          <el-option label="失火" value="失火" />
          <el-option label="翻车" value="翻车" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="事发地址" prop="address">
        <el-input
          v-model="ruleForm.address"
          placeholder="请输入路况地址，如关山大道"
        />
      </el-form-item>
      <el-form-item label="建筑标识" prop="sign">
        <el-input
          v-model="ruleForm.sign"
          placeholder="请输入建筑标识，如老北京烤鸭对面"
        />
      </el-form-item>
      <el-form-item label="发生时间" prop="time">
        <el-date-picker
          v-model="ruleForm.time"
          type="datetime"
          placeholder="请选择发生日期和时间"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="事件描述" prop="desc">
        <el-input
          v-model="ruleForm.desc"
          type="textarea"
          style="width: 300px"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef, ruleForm)"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 修改密码 -->
  <el-dialog
    v-model="userUpdatePassword"
    title="修改密码"
    :close-on-click-modal="false"
    width="400px"
  >
    <el-form
      class="password-form"
      ref="loginFormUpdate"
      :model="userPassword"
      :rules="userPasswordRules"
      label-width="100px"
    >
      <el-form-item label="用户名">
        <el-input
          placeholder="请输入用户名"
          v-model="userPassword.username"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="原密码">
        <el-input
          placeholder="请输入原密码"
          v-model="userPassword.password"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="newpassword" label="新密码">
        <el-input
          placeholder="请输入新密码"
          v-model="userPassword.newpassword"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="confirmnewpassword" label="确认密码">
        <el-input
          placeholder="再次确认密码"
          v-model="userPassword.confirmnewpassword"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitUpdate">修改密码</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- ⭐设置Popup的结构 -->
  <div id="S_popup" class="S_ol-popup" v-show="isShowPopup">
    <h5>事件详细信息</h5>
    <a href="#" id="S_popup-closer" class="S_ol-popup-closer"></a>
    <div id="S_popup-content">
      <table border>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>事件编号</td>
          <td>{{ data.事件编号 }}</td>
        </tr>
        <tr>
          <td>事件类型</td>
          <td>{{ data.事件类型 }}</td>
        </tr>
        <tr>
          <td>事件等级</td>
          <td>{{ data.事件等级 }}</td>
        </tr>

        <tr>
          <td>发生地点</td>
          <td>{{ data.发生地点 }}</td>
        </tr>
        <tr>
          <td>发生时间</td>
          <td>{{ data.发生时间 }}</td>
        </tr>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>车牌号</td>
          <td>{{ data.车牌号 }}</td>
        </tr>
        <tr
          v-if="
            UserStore.userType == 'traffic' || UserStore.userType == 'admin'
          "
        >
          <td>驾驶员</td>
          <td>{{ data.驾驶员 }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
// 导入 element 的图标库
import { Search } from '@element-plus/icons-vue'
// 导入 initMap.js -------------------------------------- 初始化地图
import { map, l_source } from '@/Hooks/initMap.js'
// 导入 workBox.js -------------------------------------- 工具箱的功能
import { handleMeasure } from '@/Hooks/workBox.js'
// 导入 toggleMap.js ------------------------------------ 切换地图的功能
import { toggleMap } from '@/Hooks/toggleMap.js'
// 导入 toggleHotMap.js --------------------------------- 切换事故多发地的功能（热力图）
import { toggleHotMap } from '@/Hooks/toggleHotMap.js'
//导入发布公告hooks
import { Announcement } from './Hooks/Announcement'
//导入退出登录的hooks
import { quitLogin } from './Hooks/quitLogin'
// 导入 showRoad.js ------------------------------------- 显示路况
import {
  ShowRoad,
  hideRoad,
  R_source,
  R_layer,
  shape
} from '@/Hooks/showRoad.js'

// 导入 showRoad.js -------------------------------------- 报告路况的Dialog
import {
  dialogVisible,
  ruleFormRef,
  rules,
  ruleForm,
  handleSubmit,
  handleCancel
} from '@/Hooks/showDialog.js'
// 导入 updatePassword.js ------------------------------- 更新密码
import { updatePassword } from '@/components/Hooks/updatePassword.js'

// 导入 typeSearch.js ----------------------------------- 搜索框搜索事件
import {
  searchText,
  data,
  isShowPopup,
  handleSearch
} from '@/Hooks/typeSearch.js'

// 导入 pinia 仓库
import { useUserStore } from '@/stores/useUserStore.js'
const UserStore = useUserStore()

//发布公告hooks
const {
  ViewAnnouncements, //控制公告数据列表弹框的显示和隐藏
  notices, //公告总数据
  getAnnouncement, //点击查看公告发送请求拿到公告数据
  ViewAnnouncement, //控制公告数据详情的显示和隐藏
  notice, //公告详情
  page, //分页器当前页数
  size, //每页显示的记录条数
  total, //总数据个数
  handleSizeChange, //根据每页显示记录的条数更新数据
  handleCurrentChange, //根据根据分页器当前页数更新数据
  handleView, //点击查看公告详情
  handleClose, //关闭详情页,打开公告页
  noticeSearch, //接收input输入框的内容
  doFilter, //实现搜索功能
  isShow, //控制分页器的显示和隐藏
  flushed, //重置表格
  makeAnnouncement //点击发布公告
} = Announcement()
//点击退出登录
const { getQuitLogin } = quitLogin()

//点击修改密码
const {
  handleUpdatePassword, //点击修改弹框状态
  userUpdatePassword, //弹框状态
  userPassword, //接收input内容
  userPasswordRules, //表单验证规则
  submitUpdate, //点击确认修改
  loginFormUpdate //表单验证
} = updatePassword()
</script>

<style scoped>
.header-top {
  float: left;
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.header-top .logo {
  font-size: 20px;
  font-weight: 700;
  padding: 0 15px;
  color: #202124;
}
.el-menu {
  border: none;
  width: 900px;
}
.header-top .el-input {
  width: 300px;
  margin: 0 30px 0 -100px;
}
.el-dropdown-link {
  cursor: pointer;
}

/* 报告路况的弹框 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-form-item__content .el-input {
  width: 300px;
  /* 下面这句切记不要删除 */
  margin-left: 0;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-form-item__content {
  width: 300px !important;
  flex: none !important;
}
.el-form-item .el-form-item {
  margin: 20px 0 0 0;
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 300px !important;
}
</style>

<style>
.el-sub-menu__title {
  padding: 0 17px !important;
}
.ViewAnnouncement {
  height: 320px;
  position: relative;
}
.ViewAnnouncement .content {
  padding: 0px 30px;
  font-size: 15px;
}
.ViewAnnouncement .time {
  position: absolute;
  right: 30px;
  bottom: 0px;
}
.notice-input {
  height: 30px;
  width: 309px;
  outline: none;
  padding-left: 8px;
  margin: 0 20px 20px 0;
}
.notice-button {
  height: 33px;
  width: 87px;
  margin-right: 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.notice-search {
  background-color: #67c23a;
}
.notice-reset {
  background-color: #e6a23c;
}

/* 修改发布公告的样式 */
.add-Announ {
  position: relative;
}
.add-Announ-input {
  margin-bottom: 30px;
}
.add-Announ-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.add-Announ-pagination {
  margin: 5px 20px;
}

/* --------------popup弹窗------------------- */
/* popup弹窗 */
.S_ol-popup {
  min-width: 130px;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 45px;
  left: -50px;
}

.S_ol-popup:after,
.S_ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.S_ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.S_ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.S_ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 11px;
  right: 15px;
}

.S_ol-popup-closer:after {
  content: '✖';
}

#S_popup-content {
  font-size: 14px;
  font-family: '微软雅黑';
}
.S_ol-popup > h5 {
  box-sizing: border-box;
  width: 250px;
  height: 25px;
  background-color: #2196f3;
  line-height: 25px;
  padding-left: 10px;
  margin: 0;
  color: #fff;
}
#S_popup-content table {
  width: 250px;
  border-collapse: collapse;
  text-align: center;
  border-color: #cccccc;
}
#S_popup-content table tr {
  height: 25px;
}
</style>
